﻿  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
  <script>
  $(document).ready(function() {
    // Fait du div artisteDialog une boite mobile masquee et modale
    $("#realisateur").autocomplete({
      // Source des données à suggérer
      source: function(request, response) { 
        // Code pour récupérer les suggestions. Ici, par ajax.
        $.ajax({
          // URL de la page demandée
          url: "../../cinema/ws/artistes.php",
          // Prendre en paramètre nom la valeur du champ "realisateur"
          data: {"nom": $("#realisateur").val()},
          // Récupérer du XML
          dataType: "xml",
          // Que faire en cas de succès (reponseXML est l'arbre XML reçu)
          success: function(reponseXML ) {
            // Récupérer les éléments artiste du résultat et remplacer
            // chacun par un couple (value, id)
            var data = $("artiste", reponseXML ).map(function() {
              var text = $(this ).attr("nom") + " (" + $(this ).attr("prenom") + ")";
              return {
                id: $(this).attr("id"),
                value: text,
                label: text
              };
            });
            // Retourner ce tableau de couples
            response(data);
          }
        });
      },
      // Effet quand un élément de la suggestion est sélectionné
      select: function(event, ui ) { 
        // event : évènement, ui : le composant suggestion de saisie
        $("#idRealisateur").val(ui.item.id); // ui.item : l'élément sélectionné
      },
      change: function(event, ui) {
        // Vider le hidden si la valeur n'est pas dans la liste
      },
      delay: 100, // ms
      minLength: 0 // nb min de caracteres saisis
    });
    
    $("#creerFilm").submit(function(event) {
      $.ajax({
        url: "ws-videos/films.php",
        type: "POST",
        data: $("#creerFilm").serialize(),
        success: function(reponse, status, xhr) {
          var location = xhr.getResponseHeader('Location');
          $("#message").html("Film créé : <a href='" + location + "'>" + location + "</a>");
          // Vider les champs
          $("#idRealisateur").val("");
          $("#realisateur").val("");
          $("#titre").val("");
        },
        error: function(reponse) {  
          $("#message").html(reponse.responseText);
        }
      });
    })
  });
  </script>
</head>

<body>
<h1>Création d'un film</h1>
<form id="creerFilm" action="javascript:">
  <fieldset style="display: inline">
    <legend>Film</legend>
    <table>
      <tr>
        <td>Titre</td>
        <td><input name="titre" id="titre"/></td>
      </tr>
      <tr>
        <td>Genre</td>
        <td>
          <select name="genre" id="genre">
            <option value="C">Comédie</option>
            <option value="D">Drame</option>
            <option value="J">Jeunesse</option>
            <option value="O">Comédie dramatique</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Réalisateur</td>
        <td>
          <input type="text" id="realisateur"/>
          <input type="hidden" id="idRealisateur" name="idRealisateur"/>
        </td>
      </tr>
      <tr>
        <td colspan="2" style="text-align: center;">
          <button id="insertFilm">Insérer</button>
        </td>
      </tr>
    </table>
  </fieldset>
  <div id="message">Zone de message</div>
</form>
